// 类的扩展
<template>
  <div>
    <prism language="javascript">
      class Rect {
      constructor(w, h) {
      this.w = w;
      this.h = h;
      this.cname = "长方形";
      } //类里边方法之间不加逗号
      mj() {
      console.log("mj=" + this.w * this.h);
      //  在对象和类里边调用属性要用this
      }
      zc() {
      console.log("zc" + (this.w + this.h) * 2);
      }
      }
      var r1 = new Rect(200, 100);
      var r2 = new Rect(100, 20);
      r1.zc();
      r2.mj();
      class square extends Rect {
      constructor(w) {
      super(w, w); //调用父类的方法
      //必须在执行super后才可以调用this
      this.cname = "正方形";
      }
      }
      var s1 = new square(20);
      var s2 = new square(10);
      s1.mj();
      s2.zc();
      console.log(Rect.prototype);
      console.log(s1.__proto__ == square.prototype);
      console.log(s1.__proto__.__proto__ == Rect.prototype);
      console.log(s1.hasOwnProperty("w")); //有这个属性
      console.log(s1.hasOwnProperty("mj")); //没有这个面积
      console.log(Rect.prototype.hasOwnProperty("mj"));
      console.log(Rect.prototype);
      Rect.prototype.say = function() {
      //ES6的继承与原型链继承是一样的
      console.log(this.cname);
      };
      r1.say();
      s1.say();
    </prism>
    <v-btn
      round
      color="success"
      @click="run"
    >
      RUN
    </v-btn>
  </div>
</template>

<script>
import Prism from "vue-prism-component";
export default {
  components: {
    Prism
  },
  methods: {
    run() {
      class Rect {
        constructor(w, h) {
          this.w = w;
          this.h = h;
          this.cname = "长方形";
        } //类里边方法之间不加逗号
        mj() {
          console.log("mj=" + this.w * this.h);
          //  在对象和类里边调用属性要用this
        }
        zc() {
          console.log("zc" + (this.w + this.h) * 2);
        }
      }
      var r1 = new Rect(200, 100);
      var r2 = new Rect(100, 20);
      r1.zc();
      r2.mj();
      class square extends Rect {
        constructor(w) {
          super(w, w); //调用父类的方法
          //必须在执行super后才可以调用this
          this.cname = "正方形";
        }
      }
      var s1 = new square(20);
      var s2 = new square(10);
      s1.mj();
      s2.zc();
      console.log(Rect.prototype);
      console.log(s1.__proto__ == square.prototype);
      console.log(s1.__proto__.__proto__ == Rect.prototype);
      console.log(s1.hasOwnProperty("w")); //有这个属性
      console.log(s1.hasOwnProperty("mj")); //没有这个面积
      console.log(Rect.prototype.hasOwnProperty("mj"));
      console.log(Rect.prototype);
      Rect.prototype.say = function() {
        //ES6的继承与原型链继承是一样的
        console.log(this.cname);
      };
      r1.say();
      s1.say();
    }
  }
};
</script>